<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发表博客</title>
    <script th:src="@{/js/wangEditor.js}" type="text/javascript"></script>
    <link th:href="@{/js/el/index.css}" rel="stylesheet"  type="text/css"/>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <script th:src="@{/js/el/index.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
</head>
</head>
<body>
<div id="app">
    <h2>发表我的博客</h2>
    <div id="editor"></div>
    <el-button @click="dialogVisible = true">发表博客</el-button>
    <button @click="go2Add()">添加类别</button>
    <el-dialog title="修改" :visible.sync="centerDialogVisible" width="30%" center>
        <el-form label-position="right" label-width="80px" :model="type">
            <el-form-item label="类型名称">
                <el-input v-model="type.typename" placeholder="输入名称"></el-input>
            </el-form-item>
            <el-button plain @click="centerDialogVisible = false;bo = false">取消</el-button>
            <el-button plain @click="add()" v-if="!bo">修改</el-button>
            <el-button plain @click="add()" v-if="bo">添加</el-button>
        </el-form>
    </el-dialog>
    <a href="/api/blog/hi1">返回</a>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <p>
            请输入标题：
            <el-input placeholder="请输入内容" v-model="input1" clearable>
            </el-input>
        </p>
        <p>
            请选择类型：
            <el-select v-model="typeid" placeholder="请选择">
                <el-option v-for="item in types" :label="item.typename" :value="item.id">
                </el-option>
            </el-select>
        </p>
        <el-button type="primary" @click="addBook()">确 定</el-button>
    </el-dialog>

    <div id="tt"></div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            input1:"",
            input2:"",
            typeid:"",
            types:[],
            type:{},
            centerDialogVisible: false,
            bo: false,//添加的按钮是否显示
            dialogVisible:false,
        },
        methods:{
            addBook(){
                alert(this.input1,this.input2)
                var html = this.editor.txt.html();
                var text = this.editor.txt.text();
                var tt = {"title":this.input1,"typeid":this.typeid,"matter":text,"details":html};

                console.log(tt)
                axios.post("/api/blog/addBook",tt)
                    .then(function (resp) {
                        document.getElementById("tt").innerHTML = resp.data;
                    })
            },
            go2Add() {
                this.type = {}
                this.centerDialogVisible = true
                this.bo = true;
            },
            add() {
                var that = this
                axios({
                    url: "/api/fore/addType",
                    method: "post",
                    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                    params: this.type
                }).then(function (resp) {
                    that.types = resp.data.data;
                    that.$message({
                        message: resp.data.msg,
                        type: 'success'

                    })
                    that.centerDialogVisible = false;
                    that.bo = false//关闭添加的显示
                })
            }
        },
        mounted(){
            const E = window.wangEditor;
            this.editor = new  E(document.getElementById("editor"))
            this.editor.config.uploadImgShowBase64 = true
            // 图片上传格式
            this.editor.config.pasteFilterStyle = false
            // this.editor.customConfig
            //设置 立体 高度
            this.editor.config.zIndex = 500
            //创建
            this.editor.create();
            // 富文本内容
            //this.editor.txt.html();

            var than = this;
            axios.get("/api/fore/findType")
                .then(function (resp) {
                    than.types = resp.data.data;
                })
        }
    })
</script>
</html>